<!--
 * @Author: wupeiwen <javapeiwen2010@gmail.com>
 * @Date: 2023-06-12 16:46:30
 * @LastEditors: wupeiwen <javapeiwen2010@gmail.com>
 * @LastEditTime: 2023-10-24 14:38:59
 * @FilePath: /tea-garden-web/src/components/component-suggestion.vue
 * @Description: 智能建议
-->
<template>
  <div class="component-smart-suggestion">
    <div class="icon-suggestion"  @click="handleFramingOperate('showAdvice')" />
    <el-dialog class="dialog" :title="dialogName" v-model="visableAdviceDialog"  @close="handleFramingOperate('cancleDialog')">
      <section class="dialog-content">
          <template v-if="allAdvice&&allAdvice.length === 0">
            <section style="width: 100%; margin-top: 40px; text-align: center; color: #333333;">暂无农事智能建议</section>
          </template>
          <template v-if="allAdvice&&allAdvice.length > 0">

            <section class="suggestion-card" v-for="(recordData, index) in allAdvice" :key="index">
              <section class="record-title">
                <span class="record-type">农事智能建议</span>
                <span class="record-buttons">
                  <el-button type="text" @click="handleFramingOperate('showAddDialog',recordData)">创建农事任务</el-button>
                </span>
              </section>
              <section class="record-content">
                <section class="record-content-item">
                  <span class="record-content-item-name">农事类型：</span>
                  <span class="record-content-item-value">{{ getDictItemNameById(recordData.farming_type) }}</span>
                </section>
                <section class="record-content-item">
                  <span class="record-content-item-name">地块：</span>
                  <span class="record-content-item-value">{{ recordData.massif_name.toString() }}</span>
                </section>
                <section class="record-content-item" v-if="showKindLabel(recordData.farming_type)">
                  <span class="record-content-item-name">{{ kindLabel(recordData.farming_type) }}：</span>
                  <span class="record-content-item-value">{{ recordData.kind || '--' }}</span>
                </section>
                <section class="record-content-item" v-if="showQuantityLabel(recordData.farming_type)">
                  <span class="record-content-item-name">{{ quantityLabel(recordData.farming_type) }}：</span>
                  <span class="record-content-item-value">{{ recordData.quantity || '--' }}</span>
                </section>
                <section class="record-content-item">
                  <span class="record-content-item-name">时间：</span>
                  <span class="record-content-item-value">
                    <span>{{ recordData.start_time }}</span>
                    <span v-if="recordData.end_time">至{{ recordData.end_time }}</span>
                  </span>
                </section>
              </section>
            </section>
          </template>
      </section>
    </el-dialog>
    <el-dialog class="dialog" :title="dialogName" v-model="visableDialog"  @close="handleFramingOperate('cancleDialog')">
      <section class="dialog-content">
        <el-steps class="steps" :active="form.step" align-center finish-status="success" v-if="dialogName === '新建农事计划'">
          <el-step title="农事类型" />
          <el-step title="农事详情" />
          <el-step title="人员与设备" />
        </el-steps>
        <section class="farming-detail" v-if="dialogName === '新建农事计划'">
          <el-form label-position="top" v-if="form.step === 1">
            <el-form-item label="地块">
              <el-select v-model="form.massif_ids" placeholder="选择地块" multiple clearable style="width: 100%;">
                <el-option v-for="(item, index) in farmlands" :key="index" :label="item.massif_num"
                  :value="item.massif_id" />
              </el-select>
            </el-form-item>
            <el-form-item label="日期">
              <el-date-picker v-model="form.start_time" type="date" placeholder="选择日期" format="YYYY-MM-DD"
                value-format="YYYY-MM-DD" style="width: 100%;" />
            </el-form-item>
            <el-form-item :label="kindLabel(form.farming_type)" v-if="showKindLabel(form.farming_type)">
              <el-input v-model="form.kind" placeholder="请输入" />
            </el-form-item>
            <el-form-item :label="quantityLabel(form.farming_type)" v-if="showQuantityLabel(form.farming_type)">
              <el-input v-model="form.quantity" placeholder="请输入" />
            </el-form-item>
          </el-form>
          <el-form label-position="top" v-if="form.step === 2">
            <el-form-item label="人员">
              <el-select v-model="form.user_ids" placeholder="选择人员" multiple clearable style="width: 100%;">
                <el-option v-for="(item, index) in users" :key="index" :label="item.user_name" :value="item.id" />
              </el-select>
            </el-form-item>
            <el-form-item label="设备">
              <el-select v-model="form.device_ids" placeholder="选择设备" multiple clearable style="width: 100%;">
                <el-option v-for="(item, index) in allEquipment" :key="index" :label="item.equipment_name"
                  :value="item.id" />
              </el-select>
            </el-form-item>
          </el-form>
        </section>
      </section>
      <section class="dialog-footer" v-if="dialogName === '新建农事计划'">
        <el-button class="button1" v-if="form.step !== 1" @click="handleFramingOperate('previousStep')">上一步</el-button>
        <el-button class="button2" v-if="form.step !== 2" @click="handleFramingOperate('nextStep')">下一步</el-button>
        <el-button class="button2" v-if="form.step === 2" @click="handleFramingOperate('addFarmingPlan')">确认</el-button>
      </section>
    </el-dialog>
  </div>
</template>

<script>
import { mapState, mapGetters, mapActions } from 'vuex'
export default {
  computed: {
    ...mapState('smart-suggestion', ['loading', 'allAdvice']),
    ...mapGetters('common', ['getDictItemNameById']),
    ...mapState('farming-calendar', ['farmlands']),
    ...mapState('base-overview', ['currentId', 'allEquipment']),
    ...mapState('manager-person', ['users'])
  },
  props: {
    methodsType: {
      type: String,
      default: 'getAllAdvice'
    }
  },
  data () {
    return {
      visableAdviceDialog: false,
      // 显示弹窗
      visableDialog: false,
      // 弹窗名称
      dialogName: '',
      // 弹窗表单
      initForm: {
        setp: '',
        farming_type: '',
        massif_ids: [],
        is_time_range: 2,
        start_time: '',
        end_time: '',
        kind: '',
        quantity: '',
        user_ids: [],
        device_ids: [],
        // 13 待执行 14待发布 15待检查
        status_: 15,
        is_warn: '',
        warn_notice_time: '',
        warn_notice_content: '',
        is_task: '',
        task_notice_time: '',
        task_notice_user: '',
        task_notice_phone: '',
        task_notice_content: ''
      },
      form: {}
    }
  },
  methods: {
    ...mapActions('smart-suggestion', ['getAllAdvice', 'getPickAdvice', 'getWeatherAdvice', 'getDiseaseAdvice', 'getGrowthAdvice']),
    ...mapActions('farming-calendar', ['getFarmlands', 'AddFarmingPlan']),
    ...mapActions('manager-person', ['getUsers']),
    ...mapActions('base-overview', ['getAllEquipment']),
    showKindLabel (farmingType) {
      return [4, 9].findIndex((item) => item === farmingType) !== -1
    },
    kindLabel (farmingType) {
      let label = ''
      switch (farmingType) {
        case 4:
          label = '肥料类型'
          break
        case 9:
          label = '药剂类型'
          break
      }
      return label
    },
    showQuantityLabel (farmingType) {
      return [3, 4, 5, 9].findIndex((item) => item === farmingType) !== -1
    },
    quantityLabel (farmingType) {
      let label = ''
      switch (farmingType) {
        case 3:
          label = '采摘量'
          break
        case 4:
          label = '施肥量'
          break
        case 5:
          label = '灌溉量'
          break
        case 9:
          label = '药剂量'
          break
      }
      return label
    },
    // 农事相关操作
    async handleFramingOperate (type, val) {
      switch (type) {
        case 'showAddDialog':
          this.dialogName = '新建农事计划'
          this.form = Object.assign({ step: 1 }, this.initForm, val)
          this.visableDialog = true
          break
        case 'cancleDialog':
          this.visableDialog = false
          this.visableAdviceDialog = false
          this.dialogName = ''
          break
        case 'nextStep':
          this.form.step = this.form.step + 1
          break
        case 'previousStep':
          this.form.step = this.form.step - 1
          break
        case 'addFarmingPlan':
          await this.AddFarmingPlan(this.form)
          this.handleFramingOperate('cancleDialog')
          break
        case 'showAdvice':
          await this[this.methodsType]()
          this.dialogName = '智能建议（' + this.allAdvice.length + '条）'
          this.visableAdviceDialog = true
          break
      }
    }
  },
  created () {
    // this.getAllAdvice()
    // this[this.methodsType]()
  },
  beforeRouteEnter (to, from, next) {
    next(vm => {
      vm.getFarmlands()
      vm.getUsers()
      vm.getAllEquipment()
    })
  }
}
</script>

<style lang="scss">
  .dialog {
  width: 100%;
}
.component-smart-suggestion {
  position: absolute;
  left: 50px;
  bottom: 0px;
  .icon-suggestion{
    display: block;
    width: 60px;
    height: 77px;
    margin: 0 auto;
    background-image: url("/public/image/common/icon-suggestion.png");
    background-size: cover;
    position: relative;
    cursor: pointer;

    &::before {
      content: '查看智能建议';
      color: #FFFFFF;
      font-size: 14px;
      display: block;
      position: absolute;
      right: -95px;
      top: 27px;
      z-index: 999;
    }

    &::after {
      content: '';
      display: block;
      width: 170px;
      height: 57px;
      background-size: cover;
      background-image: url("/public/image/common/bg-suggestion.png");
      position: absolute;
      left: 45px;
      top: 12px;
    }
  }

  .dialog-content {
    height: 380px;
    overflow-y: auto;

    .farming-types {
      width: 174px;
      margin: 30px auto 0 auto;

      .type-button {
        width: 174px;
        height: 39px;
        border-width: 1px;
        border-style: solid;
        border-radius: 8px;
        margin-top: 18px;
        cursor: pointer;
        text-align: center;
        line-height: 39px;
      }
    }

    .farming-detail {
      width: 450px;
      margin: 30px auto 0 auto;
    }

    .farming-list {
      padding: 14px 50px 0 50px;
      overflow-y: auto;

      .farmland {
        color: #9cd7dd;
        display: inline-block;

        &::before {
          content: '地块:';
          display: inline-block;
          vertical-align: top;
          margin-right: 6px;
          color: #979797;
        }
      }

      .farming-date {
        color: #9cd7dd;
        display: inline-block;
        text-align: right;

        &::before {
          content: '日期:';
          display: inline-block;
          vertical-align: top;
          margin-right: 6px;
          color: #979797;
        }
      }

      .farming {
        width: 507px;
        height: 183px;
        border-radius: 5px;
        box-shadow: 0 2px 10px 0.5px rgba(0, 0, 0, 0.1);
        margin: 8px 0;
        padding: 15px 20px;
      }
    }

    .suggestion-card {
      max-height: 300px;
      padding: 25px 25px 25px 92px;
      background: #FFFFFF;
      border-radius: 15px 15px 15px 15px;
      margin-bottom: 20px;

      &:last-of-type {
        margin-bottom: 0;
      }

      position: relative;

      &::before {
        content: '';
        position: absolute;
        left: 25px;
        top: 25px;
        width: 50px;
        height: 50px;
        background-size: cover;
        background-image: url("/public/image/base-overview/icon-10.png");
      }

      .record-title {
        .record-type {
          display: inline-block;
          vertical-align: top;
          width: 50%;
          font-size: 18px;
          font-family: PingFang SC-Medium, PingFang SC;
          font-weight: bold;
          color: #FEAD54;
          line-height: 21px;
        }

        .record-buttons {
          display: inline-block;
          width: 50%;
          font-size: 16px;
          font-family: PingFang SC-Medium, PingFang SC;
          text-align: right;
        }

        margin-bottom: 25px
      }

      .record-content {
        .record-content-item {
          font-size: 16px;
          font-family: PingFang SC-Medium, PingFang SC;
          font-weight: 500;
          line-height: 19px;
          margin-bottom: 15px;

          &:last-of-type {
            margin-bottom: 0;
          }

          .record-content-item-name {
            color: #979797;
          }

          .record-content-item-value {
            color: #333333;
          }
        }
      }
    }
  }
  .dialog-footer {
    height: 72px;
    text-align: center;

    .button1 {
      background: #EBF7F8;
      color: #089BAB;
    }

    .button2 {
      background: #089BAB;
      color: #FFFFFF;
    }
  }
}
</style>
